<template>
	<!-- 球馆 statr -->
	<view class="meadowlands">
		<view class="bg1">
			<view></view>
		</view>
		<view class="dian"></view>
		<uv-navbar :fixed="false" :placeholder="true" bg-color="transparent">
			<image slot="left"></image>
			<text slot="center" style="font-weight: bold;font-size: 32rpx;color: #FFFFFF;">我的</text>
		</uv-navbar>
		<view class="avatar">
			<view class="box1">
				<view class="left">
					<image v-if="userInfo" :src="userInfo.avatar" mode=""></image>
					<view class="miscellaneous">
						<text class="name">{{userInfo.nickname}}</text>
						<text class="id">ID:{{userInfo.id}}</text>
					</view>
				</view>
				<view class="right" @click="navTo('/pages/set/set')">
					<image src="https://www.guizhouqy.com/mini/set.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="item">
				<view class="name">我的订单</view>
				<view class="menu">
					<!-- <view @click="navTo('/pages/order/order?status=2')">
						<image src="https://www.guizhouqy.com/mini/item7.png" mode=""></image>
						<text>待付款</text>
					</view> -->
					<view @click="navTo('/pages/order/order?status=2&type=1')">
						<image src="https://www.guizhouqy.com/mini/item8.png" mode=""></image>
						<text>待确认</text>
					</view>
					<view @click="navTo('/pages/order/order?status=3&type=1')">
						<image src="https://www.guizhouqy.com/mini/item9.png" mode=""></image>
						<text>待服务</text>
					</view>
					<view @click="navTo('/pages/order/order?status=4&type=1')">
						<image src="https://www.guizhouqy.com/mini/item10.png" mode=""></image>
						<text>已完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box3">
			<view class="item" v-if="is_agent == 2" @click="navTo('/pages/my/tutor?id='+userInfo.id)">
				<view class="left">
					<image src="https://www.guizhouqy.com/mini/item6.png" mode=""></image>
					<text>助教登录</text>
				</view>
				<view class="right">
					<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="item" v-if="is_agent" @click="navTo('/pages/my/tutor?id='+userInfo.id)">
				<view class="left">
					<image src="https://www.guizhouqy.com/mini/item5.png" mode=""></image>
					<text>助教入驻</text>
				</view>
				<view class="right">
					<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
				</view>
			</view> -->
			<!-- <view class="item">
				<view class="left">
					<image src="https://www.guizhouqy.com/mini/item4.png" mode=""></image>
					<text>球馆入驻</text>
				</view>
				<view class="right">
					<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
				</view>
			</view> -->
			<view class="item" @click="agreement(10)">
				<view class="left">
					<image src="https://www.guizhouqy.com/mini/item3.png" mode=""></image>
					<text>平台介绍</text>
				</view>
				<view class="right">
					<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
				</view>
			</view>
			<view class="item" @click="agreement(5)">
				<view class="left">
					<image src="https://www.guizhouqy.com/mini/item2.png" mode=""></image>
					<text>用户协议</text>
				</view>
				<view class="right">
					<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
				</view>
			</view>
			<view class="item" @click="toBall()">
				<view class="left">
					<image src="https://www.guizhouqy.com/mini/item1.png" mode=""></image>
					<text>附近球馆</text>
				</view>
				<view class="right">
					<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
				</view>
			</view>
		</view>

		<!-- <tabbar :count="2"></tabbar> -->
	</view>
	<!-- 球馆 end -->
</template>

<script>
	import tabbar from '@/components/custom-tab-bar/index';
	import {
		goLogin,
		checkLogin
	} from '@/libs/login';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				userInfo: {},
				isLogin: false,
				is_agent: false
			}
		},
		onShow() {
			let theme = uni.getStorageSync('theme')
			this.fontColor = theme.color
			this.themeBg = 'linear-gradient(90deg, ' + theme.bg1 + ', ' + theme.bg2 + ')'
			this.isLogin = this.$store.getters.isLogin
			this.getUserInfo()
			this.getUserBaseInfo()
		},
		methods: {
			// 协议前往
			agreement(id) {
				uni.navigateTo({
					url: `/pages/public/agreement?id=${id}`
				})
			},
			// 获取用户信息
			async getUserInfo() {
				// 登录过期自动登录
				if (!this.isLogin) {
					goLogin();
				}
			},
			// 获取用户基础信息
			async getUserBaseInfo() {
				let res = await this.$api.user.getUserBaseInfo.get()
				this.userInfo = res.data.userInfo
				this.selfInfo = {
					id: res.data.userInfo.id,
					nickname: res.data.userInfo.nickname,
					avatar: res.data.userInfo.avatar
				}
				this.copyright = res.data.title
				this.verification = res.data.verification
				this.is_agent = res.data.userInfo.is_agent
			},
			//助教入驻
			settleIn() {
				let that = this
				if (!this.isLogin) {
					goLogin();
				}
				uni.showModal({
					title: '提示',
					content: '确认入驻成为助教？',
					success: function(res) {
						if (res.confirm) {
							that.submitSettleIn()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async submitSettleIn() {
				uni.showLoading({
					title: '正在入驻...'
				})
				let res = await this.$api.meadowlands.assistantAdd.get({
					assistant_name: this.userInfo.name,
					signature: "",
					avatar: this.userInfo.avatar,
					candid_photo: []
				})
				uni.hideLoading()
				if (res.code == 0) {
					this.$tool.success(res.msg);
					console.log(this.list)
				} else {
					this.$tool.error(res.msg);
				}
			},
			navTo(url) {
				if (!this.isLogin) {
					goLogin();
					return
				}
				uni.navigateTo({
					url
				})
			},
			toBall() {
				uni.switchTab({
					url: '/pages/meadowlands/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.meadowlands {
		background: #240F41;
		color: #FFFFFF;
		height: 100vh;

		.bg1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: calc(50%-59px);

			view {
				width: 118px;
				height: 118px;
				background: linear-gradient(90deg, #C829F3 0%, #4516CA 100%);
				box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 0.9;
				filter: blur(90px);
			}
		}

		.dian {
			width: 118px;
			height: 118px;
			background: linear-gradient(90deg, #1F87EF 0%, #1F87EF 100%);
			box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 0.9;
			filter: blur(90px);
			position: absolute;
			left: 0;
			top: 20px;
		}

		.title {
			font-size: 16px;
			color: #FFFFFF;
			text-align: center;
			padding-top: 30px;
			font-weight: bold;
		}

		.header {
			margin-top: 24px;
			padding: 0 26rpx;
			position: relative;
		}
	}

	.avatar {
		position: relative;
	}

	.box1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 0 24rpx;
		margin-top: 24rpx;
		position: absolute;
		width: 100%;
		z-index: 999;

		.left {
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
			}

			.miscellaneous {
				display: flex;
				flex-direction: column;
				margin-left: 32rpx;

				.name {
					font-weight: 600;
					font-size: 40rpx;
					color: #FFFFFF;
				}

				.id {
					color: #999999;
					font-size: 24rpx;
					font-weight: 600;
					margin-top: 8rpx;
				}
			}
		}


		.right {
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.box2 {
		padding: 0 24rpx;
		margin-top: 200rpx;

		.item {
			width: 100%;
			height: 224rpx;
			background: linear-gradient(180deg, rgba(154, 36, 185, 0.5) 0%, rgba(133, 22, 233, 0.5) 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 32rpx;

			.name {
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				padding-top: 16rpx;
				padding-left: 24rpx;
			}

			.menu {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				padding: 0 32rpx;

				view {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 32rpx;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-top: 8rpx;
					}
				}
			}
		}
	}

	.box3 {
		padding: 0 26rpx;

		.item {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(180deg, rgba(154, 36, 185, 0.2) 0%, rgba(133, 22, 233, 0.2) 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #9A24B9;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 16rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					color: #FFFFFF;
					font-size: 28rpx;
					margin-left: 16rpx;
				}
			}

			.right {
				padding-right: 30rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>